<template>
  <div class="app-container table-container">
    <el-row>
      <el-col :span="24">
        <el-form ref="queryTict" :model="searchDate" :inline="true" label-width="68px" size="small">
          <el-form-item label="场地名称">
            <el-select
              v-model="searchDate.yardName"
              size="small"
              filterable
              placeholder="请选择场地名称"
              clearable
              @change="changeAuditState"
            >
              <el-option
                v-for="item in yardOptions"
                :key="item.code"
                :label="item.name"
                :value="item.name"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="票务名称">
            <el-input
              v-model="searchDate.tictName"
              filterable
              placeholder="请输入票务名称"
              clearable
              size="small"
              @change="changeAuditState"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @cliclk="queryTict">搜索</el-button>
            <el-button icon="el-icon-refresh"  @click="restart">重置</el-button>
          </el-form-item>
          <el-form-item style="float:right; margin-right:0;">
            <el-button
            type="primary"
            icon="el-icon-plus"
            @click="addTictDialog"
          >新增票务</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table
      :data="tictData"
      size="mini"
      border
      style="width:100%;"
      @current-change="userChge"
    >
      <el-table-column prop="name" label="票务名称" min-width="50" />
      <el-table-column prop="code" label="票务编码" min-width="80" />
      <el-table-column prop="yardName" label="场地名称" min-width="50">
        <template slot-scope="scope">
          {{replaceOneDictionarCode(yardOptions,scope.row.yardName)}}
        </template>
      </el-table-column>
      <el-table-column prop="yardCode" label="场地代码" min-width="50" />
      <el-table-column prop="merchName" label="商户信息" min-width="50" />
      <!--            <el-table-column prop="info" label="票信息" min-width="100"></el-table-column>-->
      <el-table-column prop="tictKind" label="票务种类" min-width="40" >
        <template slot-scope="scope">
          {{replaceOneDictionarCode(tictKindOption,scope.row.tictKind)}}
        </template>
      </el-table-column>
      <el-table-column prop="recedeTick" label="退票" min-width="40">
        <template slot-scope="scope">
          {{ scope.row.recedeTick === '100' ? '可退票' : '' }}
          {{ scope.row.recedeTick === '0' ? '不可退票' : '' }}
        </template>
      </el-table-column>
      <!--            <el-table-column prop="valid" label="票状态" min-width="40">-->
      <!--                <template slot-scope="scope">-->
      <!--                    {{scope.row.valid === 'Vai' ? '有效' : ''}}-->
      <!--                    {{scope.row.valid === 'Fil' ? '归档' : ''}}-->
      <!--                    {{scope.row.valid === 'Abo' ? '废止' : ''}}-->
      <!--                </template>-->
      <!--            </el-table-column>-->
      <el-table-column width="180" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            :disabled="scope.row.status===1"
            @click="editTict( scope.row )"
          >编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            :disabled="scope.row.status===1"
            @click="deleteTict( scope.row )"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row
      type="flex"
      justify="left"
      class="pagination"
    >
      <el-pagination
        background
        :current-page="tictPage.currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="tictPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tictPage.totalElements"
        @size-change="userSize"
        @current-change="pgChge"
      />
    </el-row>
  </div>

</template>

<script>
  import { getDataForSP, writePageInfo,replaceDictionart,replaceDictionarCode } from '../../../utils/webUtils.js'
  import addTict from '@/views/tict/report/addTict'
  import editTict from '@/views/tict/report/editTict'

  export default {
    name: 'TictReport',
    components: { addTict, editTict },
    data() {
      return {
        addDialogVisible: false,
        editDialogVisible: false,
        currentEdituuid: '',
        formAlignLeft: 'left',
        searchDate: { yardName: '', tictName: '' },
        pwdShow: false,
        userSchOn: '',
        userEdit: false,
        yardOptions: [],
        uuid: '',
        tictData: [],
        tictKindOption:[],
        tictPage: {
          pageSize: 10, // 每页显示条目个数
          currentPage: 1, // 当前页数
          totalElements: 0,
          searchData: {
            merchUuid: '',
            yardName: '',
            name: ''
          }
        },
        merchants: { name: '', uuid: '' }
      }
    },
    created() {
      this.queryKinds()
      this.queryYard()
      this.queryTict(this.searchDate)
    },
    mounted() {

    },
    methods: {
      // 票务种类
      queryKinds() {
        this.axios
          .request({
            method: 'get',
            url: './kwp/kdi/para/code/TCK_KINDS',
            params: {}
          })
          .then(response => {
            this.tictKindOption = response.data.subParas
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 查询场地
      queryYard() {
        this.axios
          .request({
            method: 'get',
            url: './ope/kdi/yard/search/findAllTree',
            params: {}
          })
          .then(response => {
            this.yardOptions = response.data[0].subs
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 查询
      changeAuditState() {
        this.queryTict(this.searchDate)
      },
      // 重置重置
      restart() {
        this.searchDate.yardName = ''
        this.searchDate.tictName = ''
        this.queryTict(this.searchDate)
      },
      editSalesPlan(msg) {
        this.drawer = msg
      },
      /**
       * 打开新增对话框
       */
      addTictDialog() {
        this.$router.push("/addTict")
      },
      editTict(val) {
        this.currentEdituuid = val.uuid
        this.$router.push("/editTict/"+this.currentEdituuid)
      },
      deleteTict(val) {
        this.$confirm('确认删除 ' + val.name + ' ?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.request({
            method: 'delete',
            url: './tck/kdi/tict/' + val.uuid,
            data: {}
          }).then(() => {
            this.$message({
              message: '删除成功!',
              type: 'success'
            })
            this.queryTict(this.searchDate)
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      userChge(val) {
        if (this.userEdit) {
          this.uuid = val.uuid
        }
      },
      // 获取所有数据
      queryTict(param) {
        // 场馆名称
        this.tictPage.searchData.yardName = param.yardName
        // 票务名称
        this.tictPage.searchData.name = param.tictName
        this.axios
          .request({
            method: 'get',
            url: './ope/kdi/merch/search/findByUser',
            params: {}
          })
          .then(response => {
            // if (response.data.length < 1) {
            if (true) {
              this.axios.request({
                method: 'get',
                url: './tck/kdi/tict/search/findAll',
                params: getDataForSP(this.tictPage)
              }).then(response => {
                this.tictData = response.data.data
                writePageInfo(this.tictPage, response.data)
              }).catch(error => {
                console.log(error)
              })
            } else {
              this.merchants = response.data[0]
              this.tictPage.searchData.merchUuid = this.merchants.uuid
              this.axios.request({
                method: 'get',
                url: './tck/kdi/tict/search/findByMerch',
                params: getDataForSP(this.tictPage)
              }).then(response => {
                this.tictData = response.data.data.content
                writePageInfo(this.tictPage, response.data)
              }).catch(error => {
                console.log(error)
              })
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 列表分页
      userSize: function(pageSize) {
        this.tictPage.pageSize = pageSize
        if (this.tictPage.currentPage === 1) {
          if (this.userSchOn !== '') {
            // this.userSearch();
          } else {
            this.queryTict(this.searchDate)
          }
        }
        this.tictPage.currentPage = 1
      },
      pgChge(currentPage) {
        this.tictPage.currentPage = currentPage
        this.queryTict(this.searchDate)
      }
    }
  }
</script>
<style lang="scss">
@import "@/styles/table.scss";
.app-container{
  .pagination{
    padding: 10px 0;
  }
}

</style>

